<template>
  <div class="select-questions-section">
    <div class="section-header">
      <div class="section-indicator"></div>
      <h4>选择试题</h4>
    </div>
    
    <div class="questions-table-container">
      
      <el-table
        :data="questions"
        style="width: 100%"
        border
        @selection-change="handleSelectionChange"
        :row-key="row => row.id"
        ref="questionTable"
        v-loading="loading">
        
        <el-table-column
          type="selection"
          width="55"
          :reserve-selection="true">
        </el-table-column>
        
      
        <el-table-column
          prop="type"
          label="类型"
          width="100"
          align="center">
          <template slot-scope="scope">
            <el-tag :type="getQuestionTypeTag(scope.row.type)" size="small">
              {{ scope.row.type || '未知' }}
            </el-tag>
          </template>
        </el-table-column>
        
        <el-table-column
          prop="questionText"
          label="题目内容"
          min-width="300">
          <template slot-scope="scope">
            <div class="question-content-cell">
              <div class="question-text" v-html="scope.row.questionText || '无内容'"></div>
            </div>
          </template>
        </el-table-column>
        
        <el-table-column
          prop="answer"
          label="答案"
          width="200"
          align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.answer" v-html="scope.row.answer" class="answer-content"></div>
            <span v-else>-</span>
          </template>
        </el-table-column>
        
        <el-table-column
          prop="score"
          label="分值"
          width="80"
          align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.score || 0 }}分</span>
          </template>
        </el-table-column>
        
      </el-table>
      
      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          @size-change="$emit('size-change', $event)"
          @current-change="$emit('current-change', $event)"
          :current-page="queryInfo.pageNum"
          :page-sizes="[5, 10, 15, 30]"
          :page-size="queryInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
        
        <div class="selected-count" v-if="selectedQuestions.length > 0">
          已选 <span class="count">{{ selectedQuestions.length }}</span> 道题
        </div>
      </div>
    </div>
    
    <div class="step-actions">
      <el-button @click="$emit('cancel')" plain>取 消</el-button>
      <el-button type="primary" @click="$emit('next')">下一步</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'QuestionSelection',
  props: {
    questions: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    },
    queryInfo: {
      type: Object,
      default: () => ({
        pageNum: 1,
        pageSize: 10
      })
    },
    total: {
      type: Number,
      default: 0
    },
    selectedQuestions: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    getQuestionTypeTag(type) {
      const typeMap = {
        '选择题': 'primary',
        '判断题': 'success',
        '填空题': 'warning',
        '简答题': 'info',
        '编程题': 'danger'
      };
      return typeMap[type] || 'info';
    },
    handleSelectionChange(selection) {
      this.$emit('selection-change', selection);
    },
    handleQuestionClick(question) {
      this.$emit('question-click', question);
    }
  }
};
</script>

<style scoped>
/* 添加必要的样式 */
.questions-table-container {
  margin-top: 20px;
}

.question-text {
  line-height: 1.6;
  max-height: 120px;
  overflow: auto;
}

.answer-content {
  line-height: 1.6;
  max-height: 100px;
  overflow: auto;
  padding: 5px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.pagination-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.selected-count {
  margin-left: 20px;
  color: #409EFF;
  font-weight: bold;
}

.step-actions {
  margin-top: 30px;
  text-align: right;
}
</style>
